<template>
    <div class="container">
        <div class="form">
            <el-form ref="ruleForm" :inline="true" :model="form" :rules="rules" class="demo-form-inline">
                <el-form-item label="距离步长">
                    <el-input v-model.number="form.distance" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="显示条数">
                    <el-input v-model.number="chartLimit" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="" type="primary" @click="onSubmit">查询</el-button>
                </el-form-item> 
            </el-form>
        </div>
        <div class="line">
            <div class="pie-box">
                <pie-chart title="件数" :dataSource="countArray" valueUnit="件"></pie-chart>
            </div>
            <div class="pie-box">
                <pie-chart title="运费" :dataSource="priceArray" valueUnit="元"></pie-chart>
            </div>
        </div>
        <div class="line">
            <div class="pie-box">
                <pie-chart title="次数" :dataSource="timeArray" valueUnit="次"></pie-chart>
            </div>
            <div class="pie-box">
                <pie-chart title="人数" :dataSource="peopleArray" valueUnit="人"></pie-chart>
            </div>
        </div>
        <div class="line">
            <div class="pie-box">
                <pie-chart title="公司数" :dataSource="companyArray" valueUnit="个"></pie-chart>
            </div>
        </div>
    </div>
</template>

<script>
import pieChart from './components/pie-chaart.vue'
import { selectDataSource } from '@/api/five-charts'
export default {
    mounted() {
        this.getData()
    },
    data() {
        return {
            countArray: [],
            priceArray: [],
            timeArray: [],
            peopleArray: [],
            companyArray: [],
            chartLimit :9,
            form: {
                distance: 500
            },
            rules: {
                name: [
                    { required: true, message: '请输入距离步长', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        onSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.getData()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        getData() {
            selectDataSource({
                ...this.form
            }).then(res => {
                if (res.success) {
                    let dataList = res.root || []
                    this.initArray()
                    dataList.forEach(item => {
                        if (item.countValue != 0 && item.countValue != null) {
                            this.countArray.push({
                                name: item.key,
                                value: item.countValue
                            })
                        }
                        if (item.priceValue != 0 && item.priceValue != null) {
                            this.priceArray.push({
                                name: item.key,
                                value: item.priceValue
                            })
                        }
                        if (item.timeValue != 0 && item.timeValue != null) {
                            this.timeArray.push({
                                name: item.key,
                                value: item.timeValue
                            })
                        }
                        if (item.peopleValue != 0 && item.peopleValue != null) {
                            this.peopleArray.push({
                                name: item.key,
                                value: item.peopleValue
                            })
                        }
                        if (item.companyValue != 0 && item.companyValue != null) {
                            this.companyArray.push({
                                name: item.key,
                                value: item.companyValue
                            })
                        }
                    })
                    this.dataSourceSort()
                    console.log(this.chartLimit,11111111111);
                    this.arrayLimit(this.chartLimit)
                }
            })
        },
        initArray() {
            this.countArray = []
            this.priceArray = []
            this.timeArray = []
            this.peopleArray = []
            this.companyArray = []
        },
        dataSourceSort() {
            this.countArray.sort((a, b) => {
                return b.value - a.value
            })
            this.priceArray.sort((a, b) => {
                return b.value - a.value
            })
            this.timeArray.sort((a, b) => {
                return b.value - a.value
            })
            this.peopleArray.sort((a, b) => {
                return b.value - a.value
            })
            this.companyArray.sort((a, b) => {
                return b.value - a.value
            })
        },
        arrayLimit(limit) {
            this.countArray = this.arraySlice(this.countArray,limit)
            this.priceArray = this.arraySlice(this.priceArray,limit)
            this.timeArray = this.arraySlice(this.timeArray,limit)
            this.peopleArray = this.arraySlice(this.peopleArray,limit)
            this.companyArray = this.arraySlice(this.companyArray,limit)
        },
        arraySlice(arr,limit=9) {
            if (arr.length > limit) {
                let arr1 = arr.slice(limit, arr.length);
                arr = arr.slice(0, limit);
                let sum = 0
                for (let i of arr1) {
                    sum += i.value
                }
                arr.push({
                    name: '其他',
                    value: sum
                })
            }
            return arr
        }
    },
    components: {
        pieChart
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;

    .line {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
    }

    .pie-box {
        height: 400px;
        width: 50%;
        margin: 15px;
        padding: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
}
</style>